<template>
  <div class="home">
    <div class="main">
      <router-view />
    </div>
    <div class="bar">
      <div class="container">
        <router-link to="/phase">
          <div class="item">
            <span>相位设置</span>
          </div>
        </router-link>
        <router-link to="/stage">
          <div class="item red">
            <span>阶段配置</span>
          </div>
        </router-link>
        <router-link to="/chain">
          <div class="item">
            <span>阶段链</span>
          </div>
        </router-link>
        <router-link to="/daily/plan">
          <div class="item">
            <span>日计划</span>
          </div>
        </router-link>
        <router-link to="/dispatch">
          <div class="item">
            <span>调度表</span>
          </div>
        </router-link>
        <router-link to="/network">
          <div class="item">
            <span>网络参数</span>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import serialPortUtil from '@/util/serialPortUtil.js'
export default {
  name: 'Home',
  data() {
    return {}
  },
  created() {
    // 打开串口
    serialPortUtil.open()

  },
  mounted() {
    this.bindEvent()
  },
  watch: {
    // $route: {
    //   handler: function () {
    //     let items = document.querySelectorAll('.item')
    //     items.forEach((o) => o.classList.remove('red'))
    //     let name = this.$route.name
    //     document.querySelector(`.${name}`).classList.add('red')
    //   },
    //   immediate: true
    // }
  },
  methods: {
    bindEvent() {
      let container = document.querySelector('.container')
      let items = container.querySelectorAll('.item')
      items.forEach((item) => {
        item.addEventListener('click', () => {
          // items.forEach((o) => o.classList.remove('red'))
          container.querySelector('.red').classList.remove('red')
          item.classList.add('red')
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.home {
  height: 100vh;

  display: flex;
  flex-direction: column;
  .main {
    flex: 1;
  }
  .bar {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.5);
    border-top: 1px solid #ccc;
    .container {
      background-color: #ccc;
      opacity: 0.8;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 8px;

      a {
        text-decoration: none;
        color: white;
      }

      .item {
        width: 70px;
        background-color: green;
        height: 30px;
        border-radius: 8px;
        margin: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 12px;
      }
      .red {
        background-color: red;
      }
    }
  }
}
</style>
